<template>
  <div class="recycle-container">
    <!-- 主体表格 -->
    <div class="table">
      <el-table :border="true" :data="recycleList">
        <el-table-column type="index" width="55"></el-table-column>
        <el-table-column
          label="信息主题"
          align="center"
          type="default"
          prop="message_title"
          min-width="260"
        />
        <el-table-column
          min-width="90"
          label="所属类别"
          align="center"
          type="default"
          prop="message_category"
        />
        <el-table-column
          label="发布部门"
          align="center"
          type="default"
          prop="message_publish_department"
          min-width="90"
        />
        <el-table-column
          min-width="90"
          label="接收对象"
          align="center"
          type="default"
          prop="message_receipt_object"
        />

        <el-table-column label="删除日期" align="center" type="default" min-width="170"
          ><template v-slot="{ row }">
            {{ formaDate(row.message_delete_time) }}
          </template></el-table-column
        >
        <el-table-column label="操作" width="160" align="center">
          <template v-slot="{ row }">
            <el-popconfirm
              :title="`你确定要将此条信息还原吗`"
              confirm-button-text="确认"
              cancel-button-text="取消"
              @confirm="recover(row)"
              width="250px"
            >
              <template #reference>
                <el-button type="success" size="default">还原</el-button>
              </template>
            </el-popconfirm>
            <el-popconfirm
              :title="`你确定要将此条信息删除吗`"
              confirm-button-text="确认"
              cancel-button-text="取消"
              @confirm="deleteMessage(row)"
              width="250px"
            >
              <template #reference>
                <el-button type="danger" size="default">删除</el-button>
              </template>
            </el-popconfirm>
          </template></el-table-column
        >
      </el-table>
      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination
          class="pagination"
          v-model:current-page="page"
          :page-size="10"
          layout="prev, pager, next, jumper,total"
          :total="total"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import moment from 'moment'
import { onMounted, ref, watch } from 'vue'
import { deleteMessageAPI, getRecycliListAPI, recoverAPI } from '@/api/message'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { ElMessage } from 'element-plus'
import { tracking } from '@/utils/operation'
import { changUserReadListAPI } from '@/api/depMsg'
import { useMessageStore } from '@/stores/message'
import { useUserStore } from '@/stores/user'

const MsgStore = useMessageStore()
const userInfo = useUserStore().UserInfo
/** 处理日期 */
const formaDate = (date: string) => {
  return moment(date).format('YYYY-MM-DD HH:mm:ss')
}

// 分页器数据
const page = ref<number>(1)
const total = ref<number>(20)

/** 回收站列表 */
const recycleList = ref<Message[]>([])
const getrecycleList = async () => {
  const res = await getRecycliListAPI(page.value)
  recycleList.value = res.data!
  total.value = res.total!
}

/** 还原 */
const recover = async (row: Message) => {
  await recoverAPI(row.id!)
  ElMessage({ type: 'success', message: '还原成功' })
  /** 修改阅读列表 */
  await changUserReadListAPI(row.id!, row.message_receipt_object)
  MsgStore.getReadList()
  tracking('回收站消息', userInfo?.name!, row.message_title!, '中级', `还原`)
  getrecycleList()
}
/** 彻底删除 */
const deleteMessage = async (row: Message) => {
  await deleteMessageAPI(row.id!)
  ElMessage({ type: 'success', message: '删除成功' })
  tracking('回收站消息', userInfo?.name!, row.message_title!, '中级', `删除`)
  getrecycleList()
}

watch(page, () => {
  getrecycleList()
})
onMounted(() => {
  getrecycleList()
})
</script>

<style scoped lang="scss">
.recycle-container {
  padding: 8px;
  .el-pagination {
    display: flex;
    justify-content: center;
    margin: 15px;
  }
}
</style>
